<template>
  <div class="wrap">
    <el-color-picker
      size="mini"
      v-model="theme"
      :predefine="[
        '#409EFF',
        '#1890ff',
        '#304156',
        '#212121',
        '#11a983',
        '#13c2c2',
        '#6959CD',
        '#f5222d',
        '#0ebf9c'
      ]"
      class="theme-picker"
      popper-class="theme-picker-dropdown"
    />
  </div>
</template>

<script>
import { THEMECOLOR } from "@/utils/settings"
export default {
  data() {
    return {
      theme: ""
    }
  },
  computed: {
    defaultTheme() {
      return this.$store.state.settings.theme
    }
  },
  watch: {
    defaultTheme: {
      handler: function (val) {
        this.theme = val
      },
      immediate: true
    },
    async theme(val) {
      await this.setTheme(val)
    }
  },
  created() {
    if (this.defaultTheme !== THEMECOLOR) {
      this.setTheme(this.defaultTheme)
    }
  },

  methods: {
    async setTheme(val) {
      document.getElementsByTagName("body")[0].style.setProperty("--themeColor", val)
      this.$store.commit("settings/SET_COLOR", val)
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  cursor: pointer;
  height: $navbarHeight;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin: 0 !important;
  margin-right: 20px;
}
.theme-message,
.theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker .el-color-picker__trigger {
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>
